<template>
  <div class="record">
    <div class="item" v-for="item in careRecordList" :key="item.id">
      <div class="left">
        <el-avatar :size="60"> {{ item.completionByName }} </el-avatar>
      </div>
      <div class="content">
        照护长者：张老 <br />
        照护项目：{{ item.name }} <br />
        照护记录时间：{{ item.completionTime }}<br />
        <div class="media-list">
          <div v-for="media in item.elderlyCareRecordMediaList" class="media-item" :key="media.id">
            <div v-if="media.fileType === 'image'" class="image">
              <img :src="media.fileUrl" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { CareRecord } from "@/api/interface";
import { getElderlyCareRecordList } from "@/api/modules/elderly";

// 审核记录列表页面加载时，加载审核记录列表
onMounted(async () => {
  // 加载审核记录列表
  await loadElderlyCareRecordList();
});

// 审核记录列表请求参数
const reqElderlyCareRecordListInput = ref<CareRecord.ReqElderlyCareRecordListInput>({
  pageNum: 1,
  pageSize: 50
});
// 审核记录列表
const careRecordList = ref<CareRecord.ResElderlyCareRecordDto[]>([]);
// 加载审核记录列表
const loadElderlyCareRecordList = async () => {
  const res = await getElderlyCareRecordList(reqElderlyCareRecordListInput.value);
  careRecordList.value = res.data.list;
};
</script>

<style lang="css" scoped>
.record .item {
  position: relative;
  min-height: 60px;
  padding: 20px;
  margin-top: 10px;
  background-color: #ffffff;
  border-radius: 10px;
}
.record .item .left {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 0;
}
.record .item .content {
  padding-left: 90px;
}
.record .item .content .media-list {
  margin-top: 10px;
}
.record .item .content .media-list .media-item {
  margin-bottom: 10px;
}
.record .item .content .media-list .media-item .image {
  display: inline-block;
}
.record .item .content .media-list .media-item .image img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}
</style>
